<template>
  <div id="app">
    <!-- 
      动态绑定 :money="1000"   number 
              money="1000"    string 

        动态绑定，如果加了: 外层的引号就不要看了
     -->
    <my-demo :money="1000" :flag="true" :panda="obj"></my-demo>
    <my-demo :money="1000" :flag="true" :panda="obj"></my-demo>
  </div>
</template>

<script>
import MyDemo from './components/MyDemo.vue'
export default {
  name: 'App',
  components: {
    MyDemo,
  },
  data(){
    return {
      money:1000,
      age:99,
      obj:{
        name:'花花'
      }
    }
  },

// 父子组件传参

// 父组件到子组件：
//    1. 父组件通过 v-bind 添加标签属性，给子组件传值
    //   <Son money="100" :flag="true" :food="food"></Son>
    // 2. 子组件中，通过props来接收
    // props:['money', 'flag', 'food']


// 子组件到父组件

//  1. 在子组件中，通过 this.$emit('自定义事件名', 参数1，参数2)

//  2. 在父组件中
    // <Son money="100" @自定义事件名="处理函数"></Son>

    // methods：{
    //   处理函数名（参数1， 参数2）{
    //     // 逻辑
    //   }
    // }

}
</script>

